<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构性伪类</title>
    <style type="text/css">
        /*根元素永远都是HTML，设置背景色不包括body*/
        :root{
            background-color: #b4b4b4;
        }
        body{
            background-color: #ffffff;
        }
        body>p:not(.p1){
            color: #ff0000;
        }
        div{
            width: 200px;
            height: 150px;
        }
        :empty{
            background-color: #ff0000;
        }
        :target{
            background-color: blueviolet;
            font-size: larger;
        }
        a{
            display: inline-block;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<h1>结构性伪类root</h1>
<p>选择文档的根元素</p>
<p class="p1">选择文档的根元素</p>
<p>选择文档的根元素</p>
<div id="div"></div>
<a href="#d1">empty</a>
<a href="#d2">target</a>
<div id="d1">
    <h1>empty</h1>
    <p>选择没有任何子元素的元素，即元素没有任何内容</p>
</div>
<div id="d2">
    <h1>target</h1>
    <p>在连接中URL用锚点#可以指向文档内某个具体的元素，这个被链接的元素是目标元素</p>
</div>
</body>
</html>